<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span{
      background-color: blue;
      /* 变成块级元素显示 */
      display: block;
    }
    .d1{
      background-color: red;
      /* 变成内联元素显示 */
      display: inline;
    }
    .d2{
      background-color: aqua;
      /* 去掉幽灵空白节点方案一：
      保证父元素中只有一张没有其他元素，可以让父元素的字号为0
       */
    }
    .d2 img{
      /* 去掉幽灵空白节点方案二：
       让子元素img变成块级元素，因为幽灵空白节点只有行内块显示元素才有
      */
      display: block;
    }
    .d3{
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 不显示，就是在页面上完全没有这个元素展示了，连位置都没有留下了，但标签依然存在 */
      display: none;
    }
    /* 下拉菜单 */
    .xlcd{
      background-color: aqua;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .xlcd h1{
      background-color: red;
    }
    .xlcd ul{
      background-color: violet;
      /* 最开始加一个不显示 */
      display: none;
    }
    /* 鼠标移入到整个下拉菜单区域，同时也是移入h1 ul出来 */
    .xlcd:hover > ul{
      display: block;
    }
  </style>
</head>

<body>
<!-- 元素分两类：内联(行元素)，块级元素
内联元素特点：紧紧包裹文字，不会有多余空间，设置宽度高度无效，如果父元素有多余空间，内联元素排列是从左向右排在一行显示，如果父元素空间不足时，才会出现换行显示
块级元素特点：独占一行(是父元素的百分之百)，设置宽度高度有效，在父元素中从上向下排列
-->
<span>123</span>
<div class="d1">123</div>
<div class="d2">
  <img src="./img/幽灵空白节点.jpg" alt="">
</div>
<div class="d3"></div>
<!-- 下拉菜单 -->
<div class="xlcd">
  <h1>标题区</h1>
  <ul>
    <li>版本介绍</li>
    <li>游戏介绍</li>
    <li>英雄资料</li>
  </ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>